<template>
<view class="tabs_cp">
	<u-tabs 
		:list="getTabList" 
		:is-scroll="false" 
		:current="current" 
		@change="change"
		:show-bar="current!=-1"
		font-size="30"
		inactive-color="#626262"
		bar-height="5"
		:bar-style="{
			backgroundColor:'#5c77ff',
			marginTop:'10px',
			transitionProperty: 'font-size background-color, color',
		}"
		:active-item-style="{
			color:'#5c77ff',
			fontSize:'35rpx', 
		}">
	</u-tabs>
</view>
</template>

<script>
//tab标签页组件
export default{
	name:"TabsCp",
	props:{
		tabList:{  //tabs数据数组 Array <String>
			type:Array, 
			default:[],
		},
		currentTab:{  //当前激活的标签（由外部指定）
			type:String,
			default:'',
		},
	},
	data(){
		return{
			current: 0,  //当前激活的tab索引
		}
	},
	computed:{
		getTabList(){  //tab组建要的数组必须是Array <Object> 要拼接
			let tabList = [];
			for(let a of this.tabList){
				tabList.push({
					name:a,
				});
			}
			return tabList;
		},
	},
	watch:{
		currentTab:{  //初始化手动激活的tab页
			handler(newValue){
				this.current = this.tabList.indexOf(newValue);
			},
			immediate:true,
		},
	},
	methods:{
		change(index) {  //当标签被点击时改变标签并且触发change属性
			uni.vibrateShort();
			this.current = index;
			this.$emit("change",index);  //向外部暴露索引
		},
	},
}
</script>

<style lang="scss" scoped>
.tabs_cp{
	width: 100%;
	height: 100%;
	@include flex_layout_column;
	justify-content:center;
}
</style>
